<!--
 * @Author: Bennent_G
 * @Date: 2024-12-26 09:38:53
 * @LastEditTime: 2024-12-26 16:06:14
 * @Description:
-->

<template>
	<div>
		<a-modal v-model:open="locaVisible" v-bind="$attrs" :getContainer="false" width="600px">
			<template #footer>
				<a-button key="back" @click="close">取消</a-button>
				<a-button key="submit" type="primary" :loading="loading" @click="handleSubmit">确定</a-button>
			</template>
			<a-form ref="formRef" :model="form">
				<a-form-item label="父级部门" name="parent" :rules="[{ required: true, message: '请输入昵称!' }]">
					<a-tree-select v-model:value="form.parent" :tree-data="treeDatas"
						:field-names="{ label: 'title', value: 'key', children: 'children' }" show-search
						tree-node-filter-prop="title" allow-clear tree-default-expand-all>
					</a-tree-select>
				</a-form-item>
				<a-form-item label="部门名称" name="nickName" :rules="[{ required: true, message: '请输入昵称!' }]">
					<a-input v-model:value="form.nickName" placeholder="请输入昵称"></a-input>
				</a-form-item>
				<a-form-item label="部门状态" name="status" :rules="[{ required: true, message: '' }]">
					<a-radio-group v-model:value="form.status" name="radioGroup">
						<a-radio :value="1">启用</a-radio>
						<a-radio :value="0">禁用</a-radio>
					</a-radio-group>
				</a-form-item>
				<a-form-item label="部门描述" name="desc" :rules="[{ required: true, message: '请输入!' }]">
					<a-input v-model:value="form.desc" placeholder="请输入"></a-input>
				</a-form-item>
				<a-form-item label="部门备注" name="remark" :rules="[{ required: true, message: '请输入!' }]">
					<a-textarea v-model:value="form.remark" placeholder="请输入"></a-textarea>
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
	<contextHolder />
</template>

<script setup lang="ts">
import { computed, defineComponent, ref, reactive, watchEffect, watch } from 'vue';
import type { TreeSelectProps } from 'ant-design-vue';
import type { AnyObject } from "@/views/global";
import { useCustomNotification } from '@/hooks/common/useCustomNotification';

defineComponent({ name: 'DeptFormModal' });
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false
	},
	id: {
		type: [Number, String],
		default: 0
	},
	treeData: {
		type: Array<AnyObject[]>,
		default: () => []
	}
});
const emits = defineEmits(['update:modelValue']);
const locaVisible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emits('update:modelValue', val);
	}
});

// tree-select初始化
const treeDatas = ref<typeof TreeSelectProps['treeData']>([]);
watchEffect(() => {
	const topDept: AnyObject = {
		key: '0',
		title: '顶级部门',
		children: []
	};
	treeDatas.value = [topDept, ...props.treeData];
});

const { contextHolder, openNotifation } = useCustomNotification();

// 表单
const formRef = ref();
const loading = ref<boolean>(false);
const form = reactive<AnyObject>({
	parent: ['0-0-0'],
	nickName: '',
	desc: '',
	status: 1,
	remark: '',
});
const handleSubmit = () => {
	loading.value = true;
	formRef.value.validateFields()
		.then((values: AnyObject) => {
			console.log('Received values of form: ', values);
			// #TODO: 提交表单
			openNotifation({ type: 'success', message: '提交成功' });
			close();
		})
		.catch((error: any) => {
			console.log('error', error);
		});
	loading.value = false;
	reset();
};
const reset = () => {
	formRef.value.resetFields();
};

// 部门默认tree
const getDeptInfo = () => {
	form.value = {
		parent: [props.id],
	};
};
watch(
	() => props.id,
	(newValue, oldValue) => {
		if(newValue && newValue !== oldValue) {
			getDeptInfo();
		}
	}
);
// 关闭弹框
const close = () => {
	locaVisible.value = false;
	reset();
};

</script>

<style scoped lang="scss">
.ant-input-number {
	width: 100%;
}
</style>
